<template>
    <div class="all">
        <div style="margin-left: 10px;">
            <i class="el-icon-s-management"></i><span> 课程管理</span>
        </div>
        <el-card>
            <div class="header">
             
                <div style="width: 350px; display: flex;">
                    <el-input placeholder="课程名" v-model='name' :disabled="true" ></el-input>
                    <el-input style="margin-left: 15px;" placeholder="教师名" v-model="teacherName" :disabled="true" ></el-input>
                    <el-button style="margin-left: 15px;" type="primary" @click="search" :disabled="true"   >搜索</el-button>
                </div>
            </div>
            <el-pagination @current-change="handleCurrentChange" style="text-align: center;margin-top: 5px;"
                :current-page.sync="page" :page-size="10" layout="prev, pager, next" :total="total">
            </el-pagination>
            <el-table :data="tableData" style="width: 100%" v-loading="loading">
                <el-table-column prop="courseId" label="课程id">
                </el-table-column>
                <el-table-column prop="courseName" label="课程名">
                </el-table-column>
                <el-table-column prop="teacherName" label="教师">
                </el-table-column>
                <el-table-column prop="credit" label="学分" >
                </el-table-column>
                 <el-table-column prop="time" label="上课时间">
                </el-table-column>
                <el-table-column prop="selectedCount" label="已选人数" >
                </el-table-column>
                <el-table-column prop="maxSize" label="最大容量">
                </el-table-column>
                <el-table-column label="操作" style="padding: 0;">
                    <template v-slot="{ row }">
                        <el-button type="success" size="mini" @click="select(row.courseId)">选修</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { courseselect } from '@/api/student/courseSelect';
import { studentselect } from '@/api/student/courseSelect';
export default {

    data() {
        return {
            // 页数
            page: 1,
            // 数据表格
            tableData: [],
            // 名字
            name: '',
            teacherName: '',
            total: 0,
            dialogFormVisible: false,
            dialogedit: false,
            id: "",
            className: "",
            loading:false,
            departmentName:""
        }
    },
    methods: {
        handleCurrentChange(val) {
            this.page = val
            this.getlist()
        },
        // 页数
        getpageCount() {
        //     let params = {
        //      name: this.name,
        //         departmentName:this.departmentName,
        //        teacherName: this.teacherName
        //     }
        //    coursepageCount(params).then(res => {
        //         if (res.code === 0) {
        //             this.total = res.data * 10
        //         }
        //     })
        },
        // 列表
        getlist() {
            this.loading=true
            courseselect().then(res => {
                // console.log(res);
                this.loading=false
                if (res.code === 0) {
                    this.tableData = res.data
                }
            })
        },
        // 搜索
        search() {
            this.page=1
            this.getlist()
        },
        // 创建
        chuangjian() {
            this.dialogFormVisible = true
        },
        // 关闭窗口
        // closed() {
        //     this.dialogFormVisible = false
        //     this.dialogedit = false
        //     this.getlist()
        // },
        // 选择
        select(val) {
               this.$confirm('此操作将选修该课程, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         studentselect(val).then(res => {
                if (res?.code === 0) {
                    this.getlist()
                    this.$message({
                        type: "success",
                        message: "选修成功"
                    })
                }
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消选择'
          });          
        });
           

        },
        // edit(val) {
        //     this.id = val
        //     this.dialogedit = true
        // },
        // // 通过属性转男女
        // sfktFormate(row, index) {
        //     if (row.sex == 1) {
        //         return "男";
        //     } else if (row.sex == 0) {
        //         return "女";
        //     }
        // }


    },
    mounted() {
        this.getlist()
        this.getpageCount()

    }
}
</script>

<style lang="scss" scoped>
.all {
    background-color: #ccc;
    height: 100%;
    width: 100%;

    .el-card {

        width: 98%;
        margin: 5px auto 0;

        .header {
            display: flex;
            justify-content: flex-end;
        }
    }
}
</style>